<script setup lang="ts">
import { h, ref } from 'vue'
import { NButton, NSpace, NTag, NPopconfirm } from 'naive-ui'
import UserTableSearch from './components/user-table-search.vue'
import TableHeaderOperate from './components/table-header-operate.vue'
import UserTableDrawer from './components/user-table-drawer.vue'
import { useTable, useTableOperate } from '@/hooks/common/table'
import { useGetUsers, useDeleteUser, useDeleteusers } from '@/api'

interface User {
  id: number
  username: string
  gender: string
  nickname: string
  phone: string
  email: string
  status: number
}

type Gender = '0' | '1'
type Status = 0 | 1
type Type = 'success' | 'warning' | 'error' | 'info'

const columns = [
  {
    type: 'selection',
    align: 'center',
    width: 48
  },
  {
    title: '序号',
    key: 'id',
    align: 'center',
    width: 64
  },
  {
    title: '用户名',
    key: 'username',
    align: 'center',
    width: 100
  },
  {
    title: '性别',
    key: 'gender',
    align: 'center',
    width: 100,
    render: ({ gender }: User) => {
      const tagMap: Record<Gender, Type> = {
        '1': 'info',
        '0': 'error'
      }
      return h(
        NTag,
        {
          type: tagMap[gender]
        },
        { default: () => (gender === '1' ? '男' : '女') }
      )
    }
  },
  {
    title: '昵称',
    key: 'nickname',
    align: 'center',
    width: 100
  },
  {
    title: '手机号',
    key: 'phone',
    align: 'center',
    width: 120
  },
  {
    title: '邮箱',
    key: 'email',
    align: 'center',
    width: 200
  },
  {
    title: '用户状态',
    key: 'status',
    align: 'center',
    width: 100,
    render: ({ status }: User) => {
      const tagMap: Record<Status, Type> = {
        1: 'success',
        0: 'warning'
      }
      return h(
        NTag,
        {
          type: tagMap[status]
        },
        { default: () => (status ? '启用' : '禁用') }
      )
    }
  },
  {
    title: '操作',
    key: 'operate',
    align: 'center',
    width: 130,
    render: ({ id }: any) => {
      return h(
        NSpace,
        {
          justify: 'center',
          style: {
            gap: '0 10px'
          }
        },
        () => [
          h(
            NButton,
            {
              type: 'info',
              size: 'small',
              ghost: true,
              onClick: () => handleEdit(id)
            },
            { default: () => '编辑' }
          ),
          h(
            NPopconfirm,
            {
              onPositiveClick: () => {
                handleDelete(id)
              }
            },
            {
              default: () => '确定删除吗？',
              trigger: () =>
                h(
                  NButton,
                  {
                    type: 'error',
                    size: 'small',
                    ghost: true
                  },
                  { default: () => '删除' }
                )
            }
          )
        ]
      )
    }
  }
]

const { loading, pagination, data, getData, searchParams, resetSearchParams } = useTable({
  apiFn: useGetUsers,
  apiParams: {
    page: 1,
    size: 10,
    status: null,
    username: null,
    gender: null,
    nickname: null,
    phone: null,
    email: null
  }
})
const {
  drawerVisible,
  operateType,
  editingData,
  handleEdit,
  handleAdd,
  checkedRowKeys,
  onBatchDeleted,
  onDeleted
} = useTableOperate(data, getData)

const edit = (id: number) => {
  handleEdit(id)
}

const handleDelete = async (id: number) => {
  await useDeleteUser(id)
  onDeleted(id)
}

const handleBatchDelete = async () => {
  await useDeleteusers(checkedRowKeys.value)
  onBatchDeleted()
}
</script>

<template>
  <div class="user-manager">
    <UserTableSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
    <n-card title="用户管理" size="small">
      <template #header-extra>
        <TableHeaderOperate
          :loading="loading"
          :disabled-delete="checkedRowKeys.length === 0"
          @add="handleAdd()"
          @delete="handleBatchDelete()"
          @refresh="getData()"
        />
      </template>
      <n-data-table
        :columns="columns"
        :data="data"
        :loading="loading"
        :flex-height="true"
        class="user-table"
        remote
        :pagination="pagination"
        :scroll-x="962"
        :row-key="(row: any) => row.id"
        v-model:checked-row-keys="checkedRowKeys"
      />
      <UserTableDrawer
        v-model:show="drawerVisible"
        :operateType="operateType"
        :row-data="editingData"
        @submitted="getData()"
      />
    </n-card>
  </div>
</template>

<style scoped>
.user-manager {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.user-table {
  height: calc(100vh - 420px);
}
</style>
